<template>
	<view class="content">
		<view class="tab">
			<view class="tab_item" :class="[mode == item.id ? 'active' :'']" @click="changeTab(item.id)" v-for="item in tabData" :key="item.id">
				<view class="tab_title">{{item.title}}</view>
				<view class="tab_border"></view>
			</view>
		</view>
		<scroll-view class="scroll" :refresher-triggered="refreshStatus" @refresherrefresh="refresh" :refresher-enabled="true" scroll-y="true" @scrolltolower="lower">
			<view class="balance_box" v-if="balanceData.length > 0">
				<view class="balance_item" v-for="item in balanceData" :key="item.id">
					<view class="top">
						<view class="remark">{{item.remark}}</view>
						<view class="amount add" v-if="item.mode == 1">+{{item.amount}}</view>
						<view class="amount remove" v-if="item.mode == 2">{{item.amount}}</view>
					</view>
					<view class="bottom">
						<view class="time">{{item.created_at}}</view>
						<view class="aftet_amount">余额：{{item.after_amount}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '../../api/index.js'
	export default {
		data() {
			return {
				mode:'',
				balanceData:[],
				tabData:[{id:'',title:'全部'},{id:1,title:'收入'},{id:2,title:'支出'}],
				last_page:0,
				page:1,
				refreshStatus:false
			}
		},
		onLoad() {
		},
		onShow(){
			this.refresh()
		},
		
		methods: {
			changeTab(id){
				if (this.mode != id) {
					this.mode = id;
					this.page = 1;
					this.getBalance(2)
				}
			},
			lower(){
				if (this.page >= this.last_page) {
					this.show('没有更多数据了');
					return
				}
				this.page++;
				this.getBalance(1)
			},
			refresh(){
				this.refreshStatus = true;
				this.page = 1;
				this.getBalance(2)
			},
			getBalance(type){
				uni.showLoading({
					title:'数据加载中'
				})
				api.balanceLogs.index({page:this.page,mode:this.mode}).then(res => {
					if (res.code === 200) {
						uni.hideLoading()
						if (type == 1) {
							this.balanceData = this.balanceData.concat(res.data.data)
						} else {
							this.balanceData = res.data.data
						}
						this.last_page = res.data.last_page
						this.refreshStatus = false;
						if (this.last_page == this.page) {
							this.show('没有更多数据了')
						}
					}
				}).catch(error => {
					console.log(error)
				})
			}
		},
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
		height:100%;
		background-color: #f7f7f7;
		.tab {
			display: flex;
			background-color: #fff;
			justify-content: space-around;
			align-items: center;
			height: 80rpx;
			font-size: 30rpx;
			position: fixed;
			top: 0;
			width: 100%;
			left: 0;
			z-index: 100;
			.tab_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				.tab_border {
					width: 50rpx;
					height: 5rpx;
				}
				&.active {
					.tab_border {
						background-color: #A361F6;
					}
					.tab_title {
						font-weight: bold;
						color: #A361F6;
					}
				}
			}
		}
		
		.scroll {
			position:fixed;
			top: 100rpx;
			overflow-y: auto;
			&::-webkit-scrollbar {
			  display: none;
			}
		}
		
		.balance_box {
			display: flex;
			flex-direction: column;
			height: calc(100vh - 150rpx);
			.balance_item {
				display: flex;
				flex-direction: column;
				background-color: #fff;
				justify-content: space-around;
				font-size: 30rpx;
				width: 710rpx;
				padding: 20rpx;
				border-bottom: 1rpx solid #eee;
				.top,.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.time {
						color: #ccc;
						font-size: 24rpx;
					}
					.amount {
						font-size: 36rpx;
						display: flex;
						align-items: center;
						&.add {
							color: #A361F6;
						}
						&.remove {
							color: red;
						}
					}
					.aftet_amount {
						color: #ccc;
					}
				}
			}
		}
	}
</style>